/* This CSS should be place in a style sheet at some point. */
body {
background: #000;
font:75% "helvetica neue",helvetica,arial,verdana,tahoma,"sans serif";

}
#left{
text-align:center;
float:left;
margin-left:15%;
}



#right{
display:inline;
padding-left:40px;
float:left;

}

#player {
margin-top:120px;
}

a {
	color: #098ED1;
	text-decoration: none;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;

}

/* General warning: Beta-ish. Code could be a bit cleaner. */

.ui360,
.ui360 * {
 position:relative;
}

.ui360,
.sm2-360ui {
 /* size of the container for the circle, etc. */
 width:350px;
 height:350px;
 margin-top:-30px;
}

.ui360 {
 position:relative;
 /* a little extra spacing */
 padding-top:1px;
 padding-bottom:1px;
 margin-bottom:-18px; /* approximate "line height" we want */
 padding-left:42px; /* 50px, with a few off - margin used for visualization UI */
}

.ui360 a {
 line-height:50px;
}

.sm2-360ui {
 margin-left:-50px;
}

.ui360 {
 width:auto;
 
}

.ui360,
.ui360 * {
 vertical-align:middle;
}

.sm2-360ui {
 position:relative;
 display:inline-block; /* firefox 3 et al */
 float:left; /* firefox 2 needs this, inline-block would work with fx3 and others */
 *float:left; /* IE 6+7 */
 *display:inline;
 *clear:left;
}

.sm2-360ui.sm2_playing,
.sm2-360ui.sm2_paused {
 /* bump on top when active */
 z-index:10;
}

.ui360 a.sm2_link { /* this class added to playable links by SM2 */
 position:relative;
}

.ui360 a {
 color:#000;
 text-decoration:none;
}

.ui360 a,
.ui360 a:hover,
.ui360 a:focus {
 padding:2px;
 margin-left:-2px;
 margin-top:-2px;
}

.ui360 a:hover,
.ui360 a:focus {
 background:#eee;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 -khtml-border-radius:3px;
 border-radius:3px;
 outline:none;
}

.ui360 .sm2-canvas {
 position:absolute;
 left:0px;
 top:0px;
 
}

.ui360 .sm2-timing {
 position:absolute;
 display:block;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 margin:0px;
 font:11px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
 color:#666;
 text-align:center;
 line-height:50px;
}

.ui360 .sm2-timing.alignTweak {
 text-indent:1px; /* devious center-alignment tweak for Safari (might break things for others.) */
}

.ui360 .sm2-cover {
 position:absolute;
 left:0px;
 top:0px;
 z-index:2;
 display:none;
}

.ui360 .sm2-360btn {
 position:absolute;
 top:50%;
 left:50%;
 width:22px;
 height:22px;
 margin-left:-11px;
 margin-top:-11px;
 cursor:pointer;
 z-index:3;
}

.ui360 .sm2-360btn-default {
}

.ui360 .sm2-360data {
 display:inline-block;
 font-family:helvetica;
}

.ui360 .sm2-360ui.sm2_playing .sm2-cover,
.ui360 .sm2-360ui.sm2_paused .sm2-cover {
 display:block;
}

/* this could be optimized a fair bit. */

.ui360,
.ui360 .sm2-360btn-default {
 background:transparent url(360-button-play.png) no-repeat 50% 50%;
 _background:transparent url(360-button-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */
 cursor:pointer;
}

.ui360 {
 /*
  "fake" button shown before SM2 has started, non-JS/non-SM2 case etc.
  background image will be removed via JS, in threeSixyPlayer.init()
 */
 background-position:6px 50%;
}

.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 background:transparent url(360-button-play.png) no-repeat 50% 50%;
 _background:transparent url(360-button-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360 .sm2-360btn-default:hover,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover {
 background:transparent url(360-button-play-light.png) no-repeat 50% 50%;
 _background:transparent url(360-button-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn:hover,
.ui360 .sm2-360btn-playing:hover {
 background:transparent url(360-button-pause-light.png) no-repeat 50% 50%;
 _background:transparent url(360-button-pause-light.gif) no-repeat 50% 50%;
 cursor:pointer;
}


.ui360 .sm2-360ui.sm2_playing .sm2-timing {
 visibility:visible;
}

.ui360 .sm2-360ui.sm2_buffering .sm2-timing {
 visibility:hidden;
}

.ui360 .sm2-360ui .sm2-timing,
.ui360 .sm2-360ui .sm2-360btn:hover + .sm2-timing,
.ui360 .sm2-360ui.sm2_paused .sm2-timing {
 visibility:hidden;
}

.ui360 .sm2-360ui.sm2_dragging .sm2-timing,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover + .sm2-timing {
 /* paused + dragging */
 visibility:visible;
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn,
x.ui360 .sm2-360btn-playing,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover {
 /* don't let pause button show on hover when dragging (or paused and dragging) */
 background:transparent;
 cursor:auto;
}

.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
  background:transparent url(icon_loading_spinner.gif) no-repeat 50% 50%;
  opacity:0.5;
  visibility:visible;
}

/* inline list style */

.sm2-inline-list .ui360,
.sm2-inline-block .ui360 {
 position:relative;
 display:inline-block;
 float:left;
 _display:inline;
 margin-bottom:-15px;
}

.sm2-inline-list .ui360 {
 margin-bottom:0px;
}

.sm2-inline-block .ui360 {
 margin-right:8px;
}

.sm2-inline-list .ui360 a {
 display:none;
}

/* annotations */

ul.ui360playlist {
 list-style-type:none;
}

ul.ui360playlist,
ul.ui360playlist li {
 margin:0px;
 padding:0px;
}

div.ui360 div.metadata {
 display:none;
}

div.ui360 a span.metadata,
div.ui360 a span.metadata * {
 /* name of track, note etc. */
 vertical-align:baseline;
}

/* larger canvas, spectrum + EQ visualization and other items */

.ui360,
.sm2-360ui {
 /* size of the container for the circle, etc. */
 width:256px;
 height:256px;
}

.ui360 {
 position:relative;
 /* a little extra spacing */
 padding-top:1px;
 padding-bottom:1px;
 margin-bottom:-18px; /* approximate "line height" we want */
 padding-left:248px;
 margin-left:0px;
 background-position:22.6% 50%; /* (~109px) initial play button position */
}

.ui360 a {
 font:14px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
 white-space:nowrap;
 line-height:256px;
}

.sm2-360ui {
 margin-left:-256px;
}

.ui360 .sm2-timing {
 line-height:256px;
}

.ui360 .sm2-timing {
 font:bold 24px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
 color:#333;
 text-align:center;
 line-height:256px;
 text-indent:0px;
}

.sm2-inline-list .ui360,
.sm2-inline-list .sm2-360ui {
 margin-left:0px;
}

.sm2-inline-list .ui360 {
 margin:8px 13px 7px 0px;
 padding-left:0px;
 background-position:50% 50%; /* initial play button position */
}

.sm2-inline-list .sm2-360ui {
 border:none;
}

.sm2-inline-list .ui360 a {
 position:absolute;
 left:0px;
 bottom:0px;
 margin-left:1px;
 width:100%; /* 2px padding in box */
 height:auto;
 font-size:x-small;
 padding:2px 0px;
 color:#999;
 line-height:15px;
 text-align:center;
 display:inline;
 -moz-border-radius:0px;
 -khtml-border-radius:0px;
 border-radius:0px;
}

.sm2-inline-list .ui360 a:focus,
.sm2-inline-list .ui360 a:active {
 background-color:transparent;
}

/* Use a bigger loading image for this layout */

.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
  background:transparent url(icon_loading_spinner_bigger.gif) no-repeat 50% 50%;
  opacity:0.5;
  visibility:visible;
}

/*
 SoundManager 2 + useFlashBlock
 Flash positioning and flashblock / clicktoflash handling
*/

#sm2-container {
 /*
  where the SM2 flash movie goes. by default, relative container.
  set relative or absolute here, and don't touch it later or bad things will happen (see below comments.)
 */
 position:relative;
 width:1px;
 height:1px;
 _overflow:hidden; /* screw IE 6, just make it display nice */
}

#sm2-container object,
#sm2-container embed {
 /*
  the actual movie bit.
  SWF needs to be able to be moved off-screen without display: or position: changes. important.
  changing display: or position: or overflow: here or on parent can cause SFW reload or other weird issues after unblock,
  eg. SM2 starts but strange errors, no whileplaying() etc.
 */
 position:absolute;
}

#sm2-container object,
#sm2-container embed,
#sm2-container.swf_timedout,
#sm2-container.swf_timedout object,
#sm2-container.swf_timedout embed {
 /* 
  when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash?
  48px square flash placeholder is typically used by blockers.
 */
 left:auto;
 top:auto;
 width:1px;
 height:1px;
 bottom:0;
}

#sm2-container.swf_unblocked {
 /* SWF unblocked, or was never blocked to begin with; try to collapse container as much as possible. */
 width:1px;
 height:1px;
}

#sm2-container.swf_unblocked object,
#sm2-container.swf_unblocked embed {
 /* hide flash off-screen (relative to container) when it has loaded OK */
 left:-9999em;
 top:-9999em;
}

#sm2-container.swf_error {
 /* when there is a fatal error (flash loaded, but SM2 failed) */
 display:none;
}

#sm2-container.high_performance {
 /* "high performance" case: keep on-screen at all times */
 position:absolute;
 position:fixed;
 _top:-9999px; /* IE 6 hax, no position:fixed */
 _left:-9999px;
 bottom:0px;
 left:0px;
 /*
  special case: show at first with w/h, hide when unblocked.
  might be bad/annoying.
 */
 width:48px;
 height:48px;
 z-index:99; /* try to stay on top */
}

#sm2-container.high_performance.swf_unblocked {
 z-index:auto;
}

#sm2-container.high_performance.swf_unblocked,
#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /* 8x8px is required minimum to load in fx/win32 in some cases(?), 6x6+ good for fast performance, even better when on-screen via position:fixed */
 width:8px;
 height:8px;
}

#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /* high-performance case must stay on-screen */
 left:auto;
 top:auto;
}

#sm2-container.high_performance.swf_timedout {
 z-index:99; /* try to stay on top */
}

#sm2-container{
background: #000;
}